<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>订单</title>
		<link rel="stylesheet" type="text/css" href="../../static/css/site.css"
			th:href="@{/css/site.css}"/>
		<link rel="stylesheet" type="text/css" href="../../static/css/cart.css"
			th:href="@{/css/cart.css}"/>
	</head>
	<body>
		<div th:replace="user/userFrag::header('确认订单',' ')"></div>
		
		<div class="check-order">
			<div class="container">
				<div class="order-box">
					
					<div class="title">
						收货地址
					</div>
					
					<ul class="addr-list clear">
						<li th:data-id="${addr.id}" th:each="addr : ${addresses}">
							<div class="name" th:text="${addr.contact}">张三</div>
							<div class="phone" th:text="${addr.phone}">158****6789</div>
							<div class="address">
								<span class="province" th:text="${addr.province}">山东省</span>
								<span class="city" th:text="${addr.city}">青岛市</span>
								<span class="area" th:text="${addr.area}">城阳区</span>
								<span class="town" th:text="${addr.town}">城阳街道</span>
								<span class="detail" th:text="${addr.detail}">金日紫都 办公楼 A座 中享思途 三楼</span>
							</div>
						</li>
					</ul>
					
					
					<div class="title">
						商品及优惠劵
					</div>
					
					<div class="goods-list">
						<div class="goods-item clear"  th:each="details : ${order.orderDetails}">
							<div class="img"><img src="../../static/img/big-phone.jpg"
							th:src="@{'/upload/' + ${details.goods.pictures[0].name}}" ></div>
							<div class="name"><a th:href="@{/goods(id=${details.goodsId})}"
							 th:text ="${details.goods.name + ' ' + details.goods.version + ' ' 
							  + details.goods.color}">Xiaomi Civi 8GB+128GB 闪闪黑</a></div>
							<div class="price" th:text="${details.price} + '元' + 'x' + ${details.count}">2599元 x 1</div>
							<div class="total" th:text="${details.price * details.count + '元' }">2599元</div>
						</div>
					</div>
					
					<div class="line"></div>
					
					<div class="title">
						<span>配送方式</span>
						<span class="info">包邮</span>
					</div>
					
					<div class="line"></div>
					
					<div class="title">
						<span>发票</span>
						<span class="info">电子普通发票 个人 商品明细</span>
					</div>
					
					<div class="bill clear">
						<div class="right">
							<div class="bill-item">
								<div class="bill-name">商品件数:</div>
								<div class="bill-price"  th:text="${order.orderDetails.size() +'件'}">2件</div>
							</div>
							<div class="bill-item">
								<div class="bill-name">商品总价:</div>
								<div class="bill-price" th:text="${#aggregates.sum(order.orderDetails.![price*count])}">8098元</div>
							</div>
							<div  class="bill-item">
								<div class= "bill-name">活动优惠:</div>
								<div class="bill-price">-0元</div>
							</div>
							<div class="bill-item">
								<div class="bill-name">优惠券抵扣:</div>
								<div class="bill-price">-0元</div>
							</div>
							<div class="bill-item">
								<div class="bill-name">运费:</div>
								<div class="bill-price">0元</div>
							</div>
							<div class="bill-item total-price">
								<div class="bill-name">应付总额:</div>
								<div class="bill-money"><span th:text="${#aggregates.sum(order.orderDetails.![price*count])}">8098</span>元</div>
							</div>
						</div>
					</div>
					
				</div>
				
				<div class="pay clear">
					<div class="right">
						<a href="cart.html" class="btn-cart">返回购物车</a>
						<a href="javascript:;" class="btn-pay">去结算</a>
					</div>
				</div>
				
			</div>
		</div>
		
		<!-- 底部 -->
		<div th:replace="frag::site-footer"></div>
		<script type="text/javascript" th:src="@{/js/jquery-2.1.4.js}"></script>
		<script type="text/javascript">
		$(".addr-list li").click(function(){
			$(".addr-list li").removeClass("active");
			$(this).addClass("active");
		});
		//结算的事件
		$(".btn-pay").click(function(){
			var url ="[[@{/user/order/pay(orderId=${order.id})}]]";
			var addressId = $(".addr-list .active").attr("data-id");
			
			if(addressId == undefined){
				alert("请选择收货地址")
			}else{
				url += "&addressId=" + addressId;
			}
			
			window.location.href = url;
			
			
		});
			
		</script>
	</body>
</html>
